<template>
	<view>
		<!-- 出行路途 -->


		<view class="travel_item" :class="'programme' + programme">

			<view class="travel_address travel_start FlexAlign" >
				<view class="travel_icon FlexRow">
					
				</view>
				<view class="ftit">
					{{startval || ''}}
				</view>
			</view>
		

			<view class="travel_address travel_end FlexAlign" >
				<view class="travel_icon FlexRow">
					
				</view>
				<view class="ftit">
					{{endval || ''}}
				</view>
			</view>


		</view>

		

	</view>
</template>


<script>
import pupovercoat from "@/bundle4/components/pupovercoat.vue"
export default {
	components: {
		pupovercoat,
	},
	props: {
		
		startval: {
			type: String,
			default: '',
		},
		endval: {
			type: String,
			default: '',
		},
		ThemeType: {
			type: Number,
			default: 2,
		},
		programme: {
			type: Number,
			default: 2,
		}
	},
	data() {
		return {
			
		}
	},
	methods: {

	},

}
</script>

<style lang="scss" scoped>
@import "@/bundle4/css/Flex.scss";


.travel_pup {
	.pup_Txt {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 50rpx;
	}

	.travel_list {

		.travel_line {
			width: 100%;
			margin-bottom: 70rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			&.the_end {
				.icon i {
					color: #F5AD03;
				}
			}

			.icon {
				width: 60rpx;

				i {
					font-size: 35rpx;
					color: #0AAF73;
				}

				.circle {
					margin-left: 14rpx;
					border-radius: 100%;
					width: 16rpx;
					height: 16rpx;
					background: #E5E9EB;
				}
			}

			.content {
				flex: 1;

				font-size: 28rpx;
				font-weight: 400;
				line-height: 30rpx;
				color: rgba(38, 38, 38, 1);

			}

			.time {
				width: 180rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(38, 38, 38, 1);

			}
		}
	}

}



.travel_item {
	width: 100%;
	position: relative;
	z-index: 10;

	.travel_address {
		width: 100%;
		// border:solid 1px red;
		padding-bottom: 30rpx;
		position: relative;
		// overflow: hidden;
		&:last-of-type{
			border:none;
			padding: 0;
			&::before{
				top: 0;
				// display: none;
			}
		}
	
		&::before {
			position: absolute;
			content: '';
			display: block;
			position: absolute;
			height:50%;
			width: 1rpx;
			left: 4rpx;
			bottom: 0;
			z-index: 1;
			// top: 0;
			// D4D4D4
			border-right: 2rpx solid #D4D4D4;
		}
	}

	.ftit {
		// max-width: 250rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #444444;
	}

	
	.travel_icon {
		position: relative;
		z-index: 2;
		min-width: 16rpx;
		height: 16rpx;
		min-height: 16rpx;
		border-radius: 100%;
		background: #0AAF73;
		margin-right: 14rpx;
		
	
	}
	
	
	.travel_end .travel_icon {
		background: #F5AD03;
	}
	

	

}
</style>